<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>yasuo</title>
	<style>
	article{
		width: 400px;
		height: 600px;
		margin: 0 auto;
		border: 1px solid #000;
		font-family: sans-serif;

		
	}
		#id1{
			background-color: #707070;
			padding: 6px;
			margin-bottom: 15px;
		}
		#id2{
			border-bottom: 1px solid #000;
			height: 400px;
			position: relative;

		}
		#id3{
			position: relative;
		}
		.div1{
			
			border: 1px solid #000;
			width: 276px;
			margin: 0 auto;
			height: 159px;

		}
		img{
			
			border: 4px solid #888888;
			position: relative;
			left: 50%;
			-webkit-transform:translateX(-50%);
			border-radius: 15%;
		}
		p{
			position: absolute;
			left: 50%;
			-webkit-transform:translateX(-50%);
			top: 50%;
			font-size: 1.8em;

		}
		a{
			position: absolute;
			left: 50%;
			-webkit-transform:translateX(-50%);
			top: 80%;
			display: block;
			background-color: #FFF;
			padding:  10px 20px;
			border: 1px solid #000;
			border-radius: 10%;
			text-decoration: none;
			font-size: 30px;
			box-shadow: 10px 10px 5px #888888;
		}
		a img{
			border: 0;
			position: relative;
			width: 50px;
			height: 30px;
			left: 20px;
		}
		p img{
			width: 40px;
			height: 40px;
			border: 0;
			left: 20px;
			top: 10px;
		}
		#id3 div{ 
			left: 50%;
			position: absolute;
			transform:translateX(-50%);
			
			width: 200px;
			height: 60px;
			padding:30px;
		}
		.one{
			float: left;
		}
		.two{
			float: right;
		}
	</style>
</head>
<body>
	
	<article>
		<div id="id1">个人资料</div>
		<div id="id2">
			<div class="div1"><img src="2.jpg" alt=""></div>
			<p>面对疾风吧<img src="4.jpg" alt=""></p>
			<a href="http://lol.duowan.com/yasuo/"><img src="3.jpg" alt="">sina</a>
		</div>
		<div id="id3">
			<div>
				<button class="one">加好友</button>
				<button class="two">发纸条</button>
			</div>
			
			<br>
			<br>
			<div>
				<button class="one">写留言</button>
				<button class="two">加关注</button>
			</div>
		</div>
	</article>
</body>
</html>